<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
/*  CSS列表属性作用如下：
        设置不同的列表项标记为有序列表
        设置不同的列表项标记为无序列表
        设置列表项标记为图像

     list-style: square url("sqpurple.gif"); 	简写属性。用于把所有用于列表的属性设置于一个声明中
         list-style-type 	设置列表项标志的类型。
        list-style-position 	设置列表中列表项标志的位置。
        list-style-image 	将图象设置为列表项标志。
            */

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

ul.e{
    list-style-image:url('1.png');
}

/*浏览器兼容性解决方案
    ul:
        设置列表样式类型为没有删除列表项标记
        设置填充和边距0px（浏览器兼容性）
    ul中所有li:
        设置图像的URL，并设置它只显示一次（无重复）
        您需要的定位图像位置（左0px和上下5px）
        用padding-left属性把文本置于列表中
*/
ul.f {
    list-style-type:none;
    padding:0px;
    margin:0px;
}
ul.f li {
    background-image:url(1.png);
    background-repeat:no-repeat;
    background-position:0px 5px;
    padding-left:100px;
}


ul.aa {list-style-type:circle;}
ul.bb {list-style-type:disc;}
ul.cc {list-style-type:square;}

ol.dd {list-style-type:armenian;}
ol.ee {list-style-type:cjk-ideographic;}
ol.ff {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

    </style>
</head>
<body>
<p>无序列表实例:</p>

<ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ul class="e">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="f">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>





<ul class="aa">
    <li>Circle type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="bb">
    <li>Disc type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="cc">
    <li>Square type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ol class="dd">
    <li>Armenian type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="ee">
    <li>Cjk-ideographic type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="ff">
    <li>Decimal type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="g">
    <li>Decimal-leading-zero type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="h">
    <li>Georgian type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="i">
    <li>Hebrew type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="j">
    <li>Hiragana type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="k">
    <li>Hiragana-iroha type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="l">
    <li>Katakana type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="m">
    <li>Katakana-iroha type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="n">
    <li>Lower-alpha type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="o">
    <li>Lower-greek type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="p">
    <li>Lower-latin type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="q">
    <li>Lower-roman type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="r">
    <li>Upper-alpha type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="s">
    <li>Upper-latin type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="t">
    <li>Upper-roman type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="u">
    <li>None type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="v">
    <li>inherit type</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>
</body>
</html>